<template>
  <div class="MiniAreaCard">
    <h1>{{ config.title }}</h1>
    <h2 :style="{color: color[type]}">{{ config.num }}</h2>
    <div style="height: 98px;margin-top: 12px">
      <MiniArea :data="config.data" :color="color[type]" />
    </div>
    <!-- <p :style="{color: color[type]}">{{ config.totalText }}{{ config.total }}</p> -->
  </div>
</template>

<script>
import MiniArea from './Index';

export default {
  components: {
    MiniArea
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          title: '文章数量',
          num: 8846,
          data: [2000, 1500, 1800, 800, 1500, 980, 1800],
          totalText: '总文章数量',
          total: 12846
        };
      }
    },
    type: {
      default: 0
    }
  },
  data() {
    return {
      color: ['#2E93FA', '#A81EE1', '#27BD6A', '#E00C0C', '#AC9D20', '']
    };
  }
};
</script>

<style scoped lang="less">
  .MiniAreaCard {
    padding: 8px 14px;
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(20,15,41,0.1000);
    border-radius: 10px;
    height: 190px;
    h1,h2,p {
      margin: 0;
    }
    h1 {
      font-size: 18px;
      font-weight: 400;
      color: #333;
    }
    h2 {
      font-size: 32px;
      font-weight: 500;
      color: #2E93FA;
      line-height: 34px;
      opacity: 0.9;
    }
    p {
      font-size: 16px;
      font-weight: 400;
      color: #2E93FA;
    }
  }
</style>
